import React from 'react';
import { Link } from 'react-router-dom';

import styles from './index.css';
import { Asset, AssetProps } from '@/components/asset';
import { LineChart } from '@/components/line';
import { LineProps, PieProps } from '@/components/chart.interface';

import { get } from './httputil';
import { ZebraChart } from '@/components/bar/zebra';
import { BarChart } from '@/components/bar/bar';
import { Bar2Chart } from '@/components/bar/bar2';
import { Bar2LineChart } from '@/components/bar/bar2line';
import { CircularChart } from '@/components/pie/circular';
import { WorldChart } from '@/components/world/world';
import { World3dChart } from '@/components/world/world3d';

export interface IndexState {
  assetComplete: AssetProps;
  assetUnfinished: AssetProps;
  trend: LineProps;
  assetStatistics: LineProps;
  services: LineProps;
  industry: LineProps;
  menace: LineProps;
  assetIndustry: PieProps;
  risk: PieProps;
}

class Index extends React.Component<{}, IndexState> {
  constructor(props: any) {
    super(props);

    this.state = {
      assetComplete: {},
      assetUnfinished: {},
      trend: {},
      assetStatistics: {},
      services: {},
      industry: {},
      menace: {},
      assetIndustry: {},
      risk: {},
    };
  }

  componentDidMount() {
    get(`/api/asset/complete`).then(response => this.setState({ assetComplete: { ...response } }));
    get(`/api/asset/unfinished`).then(response =>
      this.setState({ assetUnfinished: { ...response } }),
    );
    get(`/api/trend`).then(response => this.setState({ trend: { ...response } }));
    get(`/api/asset/statistics`).then(response =>
      this.setState({ assetStatistics: { ...response } }),
    );
    get(`/api/services`).then(response => this.setState({ services: { ...response } }));
    get(`/api/industry`).then(response => this.setState({ industry: { ...response } }));
    get(`/api/menace`).then(response => this.setState({ menace: { ...response } }));
    get(`/api/asset/industry`).then(response => this.setState({ assetIndustry: { ...response } }));
    get(`/api/risk`).then(response => this.setState({ risk: { ...response } }));
  }

  labelWithValue = (title: string, value: string, unit: string) => {
    return (
      <div className={styles.amain}>
        <div className={styles.aleft}>{title}</div>
        <div className={styles.aright}>
          {value}
          {unit}
        </div>
      </div>
    );
  };

  render() {
    const {
      assetComplete,
      assetIndustry,
      assetUnfinished,
      assetStatistics,
      industry,
      menace,
      risk,
      services,
      trend,
    } = this.state;

    return (
      <>
        <div className={styles.left}>
          <Asset {...assetComplete}></Asset>
          <Asset {...assetUnfinished}></Asset>
          <div className={styles.leftbottom}>
            <BarChart {...services}></BarChart>
            {this.labelWithValue('nginx', '20.60', '%')}
            <ZebraChart {...assetStatistics}></ZebraChart>
            {this.labelWithValue('80', '20.60', '%')}
          </div>
        </div>
        <div className={styles.center}>
          <World3dChart></World3dChart>
          <div className={styles.twolines}>
            <LineChart {...trend}></LineChart>
          </div>
          <Link className={styles.map} to={'/dashboard'}>
            <WorldChart layoutCenter={['50%', '50%']} layoutSize={'80%'}></WorldChart>
          </Link>
          <div className={styles.mainTop}>
            <p>白泽全平台资产状况</p>
            <span>Baize a full platform asset status</span>
          </div>
          <div className={styles.mainLeftTop1}>
            <p>任务统计数</p>
            <p>资产探测总数</p>
            <span>Total asset detection</span>
            <p>232,425</p>
          </div>
          <div className={styles.mainLeftTop2}>
            <p>资产扫描数</p>
            <p>环比增长</p>
            <span>Chain growth</span>
            <p>150</p>
          </div>
          <div className={styles.mainRight}></div>
          <div className={styles.mainRightTop}>
            <div className={styles.mainRightTopTitle}>
              <p>总监控资产数</p>
              <span>Total monitored assets</span>
              <p>9,855,318</p>
            </div>
            <div className={styles.mainRightTopDetail}>
              <p>国家气象局存在弱口令漏洞</p>
              <p>14:08</p>
              <p>国家气象局存在弱口令漏洞</p>
              <p>14:08</p>
              <p>国家气象局存在弱口令漏洞</p>
              <p>14:08</p>
              <p>国家气象局存在弱口令漏洞</p>
              <p>14:08</p>
              <p>国家气象局存在弱口令漏洞</p>
              <p>14:08</p>
              <p>国家气象局存在弱口令漏洞</p>
              <p>14:08</p>
            </div>
          </div>
        </div>
        <div className={styles.right}>
          <div className={styles.rightTop}>
            <Bar2Chart {...industry}></Bar2Chart>
            <Bar2LineChart {...menace}></Bar2LineChart>
          </div>
          <div className={styles.rightBottom}>
            <CircularChart {...assetIndustry}></CircularChart>
            <div className={styles.circularChart}></div>
            <CircularChart {...risk}></CircularChart>
            <div className={styles.circularChart2}></div>
            {this.labelWithValue('严重漏洞', '923', '个')}
            {this.labelWithValue('同比增长', '0.35', '%')}
          </div>
        </div>
      </>
    );
  }
}

export default Index;
